<template>
  <div>
    <SearchLink />
    <div class="content" v-if="categories.length">
      <view class="left">
        <view :class="{active:activeIndex===index}"
            @click="changeIndex(index)"
            v-for="(cate1,index) in categories" :key="index">{{cate1.cat_name}}</view>
      </view>
      <div class="right">
        <image src="/static/images/titleImage.png" />
        <view>
          <view class="cate2"
              v-for="(cate2, index2) in categories[activeIndex].children"
              :key="index2">
            <p class="title">/<span>{{cate2.cat_name}}</span>/</p>
            <view>
              <view class="cate3"
                  v-for="(cate3, index3) in cate2.children"
                  :key="index3" @click="toSearchList(cate3.cat_name)">
                <img :src="cate3.cat_icon"
                     alt="">
                <p>{{cate3.cat_name}}</p>
              </view>
            </view>
          </view>
        </view>
      </div>
    </div>
  </div>
</template>

<script>
import SearchLink from '../../components/SearchLink'

export default {
  components: {
    SearchLink
  },
  data () {
    return {
      activeIndex: 0,
      categories: []
    }
  },
  onLoad () {
    this.getCategories()
  },
  methods: {
		changeIndex(index){
			this.activeIndex=index
		},
    async getCategories () {
      this.categories = await this.$request({
        url: '/api/public/v1/categories'
      })
    },
    toSearchList (catName) {
      wx.navigateTo({ url: '/pages/search_list/main?catName=' + catName })
    }
  }
}
</script>

<style lang="less">
.content {
  display: flex;
  position: absolute;
  top: 100rpx;
  // left:0;
  // right:0;
  width: 100%;
  bottom: 0;
  .left {
    width: 198rpx;
    overflow: scroll;
    view {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      border: 1rpx solid #eee;
      box-sizing: border-box;
      background-color: #f4f4f4;
      &.active {
        color: #eb4450;
        background-color: #fff;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 8rpx;
          height: 60rpx;
          background-color: #eb4450;
          left: 0;
          top: 20rpx;
        }
      }
    }
  }
  .right {
    flex: 1;
  }
}

.right {
  padding: 20rpx 16rpx 0;
  overflow: scroll;
  image {
    width: 520rpx;
    height: 180rpx;
  }
  .title {
    height: 110rpx;
    line-height: 110rpx;
    color: #e0e0e0;
    text-align: center;
    span {
      margin: 0 30rpx;
      color: #333;
    }
  }
}

.cate2 {
  view {
    display: flex;
    flex-wrap: wrap;
  }
}
.cate3 {
  width: 33.33%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom:20rpx;
  img {
    width: 120rpx;
    height: 120rpx;
  }
}
</style>